<script lang="ts">
import {defineComponent, ref, toRefs, reactive, unref, watch} from 'vue';
import router from "/@/router";
import {ElMessage} from "element-plus";
import PolicyDialog from "/@/views/PolicyDialog.vue";
import {checkPasswordStrong} from "/@/utils/format.ts"

export default defineComponent({
  name: 'RegisterView',
  components: {PolicyDialog},
  setup() {
    const formRef = ref(null);
    const policyDialogRef = ref(null);
    const state = reactive({
      logoIcon: import.meta.env.VITE_LOGO,
      passStrong: 0,
      formData: {
        nickname: null,
        mobile: null,
        password: null,
        confirmPassword: null,
        gender: 2,
        policy: 0
      },
      formRules: {
        nickname: [
          {required: true, trigger: "blur", message: "输入账号或手机号"}
        ],
        password: [
          {required: true, trigger: "blur", message: "输入登录口令"}
        ],
        confirmPassword: [
          {required: true, trigger: "blur", message: "输入重复口令"}
        ],
        policy: [
          {required: true, trigger: "blur", message: "请阅读并同意相关协议及政策"}
        ]
      },
    });
    watch(() => state.formData.password,
        (_val) => {
          if (_val != null && _val != '') {
            state.passStrong = checkPasswordStrong(_val)
          } else {
            state.passStrong = 0;
          }
        })
    const handleLogin = () => {
      if (!state.formData.policy) {
        ElMessage.error("请阅读并同意相关协议及政策");
        return;
      }
      const formWrap = unref(formRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
          router.push('/jim')
        }
      });
    }
    const goLogin = () => {
      router.push('/login')
    }
    const showPolicy = (_type: string) => {
      policyDialogRef.value.openDialog(_type);
    }
    return {
      policyDialogRef,
      formRef,
      handleLogin,
      goLogin,
      showPolicy,
      ...toRefs(state)
    }
  }
})
</script>

<template>
  <div class="login-container">
    <div class="login-wrap">
      <div class="logo">
        <el-image :src="logoIcon"/>
        <span class="color-font">网页版-账号注册</span>
      </div>
      <el-form ref="formRef"
               class="form-style"
               :model="formData"
               size="large"
               :rules="formRules"
               label-position="top"
               label-width="80">
        <el-form-item prop="nickname" label="用户昵称">
          <el-input
              clearable
              v-model="formData.nickname"
              autocomplete="off"
              placeholder="输入昵称">
          </el-input>
        </el-form-item>
        <el-form-item prop="password" label="登录口令">
          <el-input clearable v-model="formData.password" type="password" placeholder="输入登录口令">
          </el-input>
          <div class="psd-s">
            <span class="color-font font-12">密码强度</span>
            <div class="items">
              <span class="psd-s-item" :class="passStrong >= 1 ? 'psd-s-act' : ''"></span>
              <span class="psd-s-item" :class="passStrong >= 2 ? 'psd-s-act' : ''"></span>
              <span class="psd-s-item" :class="passStrong >= 3 ? 'psd-s-act' : ''"></span>
              <span class="psd-s-item" :class="passStrong >= 4 ? 'psd-s-act' : ''"></span>
              <span class="psd-s-item" :class="passStrong >= 5 ? 'psd-s-act' : ''"></span>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="confirmPassword" label="登录口令">
          <el-input clearable v-model="formData.confirmPassword" type="password" placeholder="再次输入登录口令">
          </el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="手机号">
          <el-input
              clearable
              v-model="formData.mobile"
              autocomplete="off"
              placeholder="输入手机号码">
          </el-input>
        </el-form-item>
        <el-form-item prop="gender" label="用户性别">
          <el-radio-group v-model="formData.gender">
            <el-radio :value="0" size="large">女</el-radio>
            <el-radio :value="1" size="large">男</el-radio>
            <el-radio :value="2" size="large">保密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleLogin" type="primary" style="width: 100%">注册</el-button>
        </el-form-item>
        <div class="policy-wrap">
          <el-checkbox v-model="formData.policy" style="margin-right: 10px;"/>
          <span>阅读并同意<b class="color-primary pointer" @click="showPolicy('user')">《JIM隐私协议》</b>和<b
              class="color-primary pointer" @click="showPolicy('duty')">《JIM免责声明》</b></span>
        </div>
      </el-form>
      <div class="common-act">
        <span class="color-font pointer" @click="goLogin">登录账号</span>
      </div>
    </div>
    <PolicyDialog ref="policyDialogRef"/>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;

  .login-wrap {
    width: 500px;
    min-height: 480px;
    background-color: rgba(255, 255, 255, 0.9);
    //border-radius: 16px;
    padding: 40px 60px;

    .logo {
      display: flex;
      align-items: center;
      margin-bottom: 40px;
      flex-direction: row;
      justify-content: center;

      .el-image {
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }

      span {
        font-size: 24px;
        font-weight: bold;
      }
    }

    .psd-s {
      display: flex;
      align-items: center;
      padding: 6px 0;
      width: 100%;
      line-height: 20px;

      span {
        margin-right: 10px;
      }

      .items {
        .psd-s-item {
          display: inline-block;
          width: 20px;
          height: 6px;
          border-radius: 3px;
          margin-right: 3px;
          border: 1px solid #a3a3a3;
        }

        .psd-s-act {
          background-color: #88147f;
          border: 1px solid #88147f;
        }
      }

    }

    .policy-wrap {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: baseline;
      color: #5d5d5d;
    }

    .form-style {
      width: 100%;
    }

    .common-act {
      text-align: center;
      color: var(--el-color-primary);
      padding-top: 20px;
    }
  }
}
</style>
